Menunjukan widget cara pengunaan yg sering dipakai 
Namanya drop Button atau disebut comboBox 

Baut stl 

Lalu home nya buat 
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OPEN EDITORS 1 UNSAVED import 
.. 
FLUTTER App 


ra void main = runApp(™ 


class MyApp extends Statele 
override 
t build(BuildContext context) { 
return MaterialApy 
debugShowCheckedModeBanner: false, 
home: 
); 
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DEPENDENCIES 


PS E:\Dropbox\FlutterProject\flutter_app> 


00:41 06:57 


Untu homePAge 


Lalu title nya demo dropButton 
Lalu langsung ke body 
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© mindan 
OPEN EDITORS 1 UNSAVED 
.. ass inPage extends StatefulW 
FLUTTER APP erride 


e createState() = MainPz 


class MainP 
@override 
dget build(BuildCo xt context) { 
return $ 
appBar: A Text (0E), ), 
body: , 
); 
} 
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DEPENDENCIES 


PS E:\Dropbox\FlutterProject\flutter_app> | | 


00:50 06:57 


Ini dgn cara snipet 


Dalam body ini buat sebuah column 

Childre nya buat dropDownButton 

Lalu dibawah nya buat text untuk item yg dipilih dari dropButton 
Ksoongi dahulu 
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OPEN EDITORS 1 UNSAVED 


© © mai 


FLUTTER APP 


tate extends State 
override 
t build(BuildContext context) { 
return Scaffold( 
appBar ppBar(title: Text("I 
body: yLumn 
children: <Widget>[ 
nButton(), 
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PS E:\Dropbox\FlutterProject\flutter_app> 


01:36 06:57 


I) dam Gu FS 0 E 
Berikutnya buat satu buah class person 

Ini kita pilih dari daftar person 

Dalam nya buat satu buah field 

Namnya name 
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V OPEN EDITORS 1 UNSAVED return > 
0. art appBar 
PENA, body: Columr 
ata children: 
Uropdcow 
Text( 
1, 
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DEPENDENCIES 


PS E:\Dropbox\FlutterProject\flutter_app> 


01:53 06:57 


Ih ee mt) Cat SSI» 


1 
x 


Kalau sudah bagian atas buat Person selectedPerson; untuk mentat yg dipilih mana 
Berikutnya buat method untuk mengenerate item2 nya 

List<DropMenultem> generate = disni minta List<Peson> pesons 

Lalu disini punya list<person> persons = [ 

Isinya person(“joni”) 

Dan kedua 
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V OPEN EDITORS 1 UNSAVED 
es 


FLUTTER APP 


ss MainPage extends 
erride 
inPageState createState() = 


MainPageState extends State 
yn selectedPerson; 
t<Pe n> persons = 
nC 1 ), 
on( ) 


st<DropdownMenultem> generateItems( | 
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Windows PowerShell 
Copyright (C) Microsoft Corporation. All rights reserved. 


Try the new cross-platform PowerShell https://aka.ms/pscore6 
ourune 


DEPENDENCIES 


PS E ropbox\FlutterProject\flutter_app> 


> ma Cait] Sisik —_ 
Ini belum ada namenya 
Buat contructornya 
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© mind © 
V OPEN EDITORS 1 UNSAVED Widge bu1Ld( BL 
.. d return S 
FLUTTER APP appBa 
midea 
s body: ¢ 
. children 
ag Dropd 
- 
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Person 
ring name; 


on(this.name); 


1: powershell 
PowerShell 
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OUTUNE 


DEPENDENCIES 


02:56 06:57 


Ke atas lagi disni buat list<dropmenultem> items =[] list ksoong 

Lalu kita for dari person 

Untuk setaip item dalam person 

Kita tambahkan dropMenu nya 

Items.add(dropdownMenultem( child: nya text(item.name diambil) value nya itu item 
nya sendiri 

Kalau sudah tingal return si items nya 
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Q mandat © 


V OPEN EDITORS 1 UNSAVED 


createState > 


selectedPerson; 
< > persons = 


< > generateItems > persons 
< > items = []; 
item persons) 
items.add 
child: (item.name), 


value: item, 


Try the new cross-platform PowerShell https://aka.ms/pscore6 
PS E:\Dropbox\FlutterProject\flutter_app> 


"ae? 9 © D 4 
03:47 


>| ap Fait] Fs oa 
Kembali ke bawah 

Di dropDownbutton ini kita pasang value nya itu selectedPerson 

Lalu itemnya itu diambil dari generateitems(person) 

Lalu onchange : dia aka memberikan item yg dipilih 

Jadi disni ti9ngal setstate 

selectedPerson ganti yg dipilh item 

Textnya yg ksong tampilkan name dari selectedPerson kalau tidak null 
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@override 
Widget build(BuildCont context) 
return Scaffold( 
-appBar: AppBar 
title: T 
, 
body: Columr 
children idget>[ 
DropdownButton( 
value: selectedPerson, 
items: generateItems(persons), 
onChange item 
setState(() { 
selectedPerson = item; 


H; 
), 


——Text((selectedPerson # null) ? selectedPerson.name 


l, 
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ourune 
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& mindan X 
VARIABLES 
@override 
et build(BuildCont context) { 
return S fold( 
appBar 
title: 
, 
body: 
children: dget»| 
DropdownButton( 
valu selectedPerson, 
items: generateItems(persons), 
onChange item 
setState(() { 
selectedPerson = item; 


}); 
), 


Text((selectedPerson = null) ? selected 


CALL STACK 


Restarted application in 1,995ms. 

V/AudioManager (24406): playSoundEffect effectType: 
I/zygote64( 24406 Do partial code cache collection, 
I/zygote64(24406): After code cache collection, code 
I/zygote64(24406): Increasing code cache capacity to 2 


BREAKPOINTS 


E ETA E) 


05:00 06:57 
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VARIABLES 
: Demo Dropdown Button 
build( context) { 


return Joko ~ 


Joko 
("Demo Dropdown Button"), 


( 
children: « > 
( 
value: selectedPerson, 
items: generateItems(persons), 
onChanged: (item) { 
setState( 

selectedPerson = item; 

); 
h 


Si (selectedPerson + ) ? selected 


V/AudioManager (24406): playSoundEffect effectType: @ 
I/zygote64(24406): Do partial code cache collection, code 
ygote64(24406): After code cache collection, code-61K 
I/zygote64(24406): Increasing code cache capacity to 256 
V/AudioManager (24406): playSoundEffect effectType: @ 


BREAKPOINTS 


1 ami ot (sisix Me | 
Sekarang perbaiki tampilannya 

Seakrang kita bungkus lagi dropDown dgn container 

Disini kasih margin 20 

Di dropDown kasih isexPanded nya true 
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maindart X 


V VARIABLES 


children: 


margin: .all (20), 
child: ( 
isExpanded: x 
value: selectedPerson, 
items: generateItems(persons), 
onChanged: (item) { 
setState(() { 
selectedPerson = item; 
}); 
h 


CALL STACK ((selectedPerson + ) ? selectedPerson.name : 


V/AudioManager (24486): playSoundEffect effectType: @ 
Reloaded 1 of 473 libraries in 760ms. 
Reloaded 1 of 473 libraries in 661ms. 


Reloaded 1 of 473 libraries in 653ms. 
BREAKPOINTS 


Reloaded 1 of 473 libraries in 620ms. 


IT PBB Lali Sisix Me | 
Lalu biar bagus maka disini ditext buat belum ada terpilih 

Kasih style font 18 buat bold 

DidropDwon juga bisa di ubah2 fontnya 

Dgn style 
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V VARIABLES 
margin: .all(20), 
child: ( 
isExpanded: j 
style: (fontSize: 20, color: .purple), 
value: selectedPerson, 
items: generateItems(persons), 
onChanged: (item) { 
setState(() { 
selectedPerson = item; 


}); 
), 


( 
(selectedPerson + ) 
? selectedPerson.name 
Belum ada yang terpilih", 
coat uae styl (fontSize: 18, fontWeight: 


Reloaded 0 libraries in 653ms. 

Reloaded libraries in 620ms. 

Reloaded libraries 639ms. 

Reloaded libraries in 622ms. 
BREAKPOINTS 

Reloaded libraries 607ms. 


Sekarang lihat 


59.FLUTTER 56. Drop Down Button.mp4 - VLC media player — x 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


maindart 
V VARIABLES 
margin: -all(20), 
child: ( 
isExpanded: , 
style: (fontSize: 20, color 
value: selectedPerson, 
item generateItems(persons), 
onChanged: (item) { 
setState(() { 
selectedPerson = item; 


}); 


Demo Dropdown Button 


), 


) 
, 


(selectedPerson + ) 
? selectedPerson.name 
"Belum ada yang terpilih", 
Guna style: (fontSize: 18, fontWeig 


Reloaded 3 libraries in 653ms. 
Reloaded libraries in 620ms. 
Reloaded 0 libraries 639ms. 
senate Reloaded 473 libraries 622ms. 


B All Excer Reloaded libraries in 607ms. 


Maka disni sudah rapi 


